<template>
	<view style="width: 100%;height: 100%;">
		<canvas canvas-id="canvas" id="canvas"></canvas>
		<picker-color :isShow="showPickerColor" :bottom="0" @callback='getPickerColor' />
		<button class="but" type="default" @click="showPickerColorPop">背景颜色选择</button>
		<button class="but" type="default" @click="exportImage">保存图片</button>
		<button class="but" type="default" @click="fabushri">抖音图片</button>
	</view>
</template>

<script>
	import pickerColor from "../../component/helang-pickerColor.vue"
	import Painter from "mp-painter";
	export default {
		components: {
			"picker-color": pickerColor,
		},
		data() {
			return {
				datalist: {},
				color: '#06c1ac',
				showPickerColor: false,
			};
		},
		async onReady() {
			const db = uniCloud.database()
			let res = await db.collection('shengricode').orderBy('date desc').get({
				getOne: true
			})
			this.datalist = res.result.data
			let painter = new Painter(uni.createCanvasContext("canvas"));
			await painter.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 2600,
				background: "#06c1ac",
				"children": [{
						"position": "absolute",
						top: 10,
						"type": "rect",
						"background": this.color,
						left: 10,
						width: 727,
						height: 2600,
					},
					{
						type: "image",
						src: "../../../static/laba.png",
						width: 400,
						height: 400,
						"position": "absolute",
						top: 810,
						left: 400,
						objectFit: "cover",
						objectPosition: ["center", "top"]
					},
					{
						type: "image",
						src: "../../../static/heaad.png",
						width: 715,
						height: 400,
						left: 15,
						top: 20,
						objectFit: "cover",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						"position": "absolute",
						top: 220,
						left: 180,
						width: 500,
						color: '#fff',
						fontSize: 50,
						fontFamily: "Times, 楷体",
						"content": this.datalist.title
					},

					{
						"type": "text-block",
						"fontFamily": "times",
						width: 400,
						left: 40,
						top: 30,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "生日花：" + this.datalist.name
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						width: 400,
						left: 40,
						top: 20,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "生日花含义："
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						left: 40,
						width: 700,
						top: 20,
						color: '#fff',
						fontSize: 28,
						"content": this.datalist.name_des
					},

					{
						"type": "text-block",
						"fontFamily": "times",
						top: 30,
						left: 40,
						width: 400,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": '花语：' + this.datalist.lang
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						width: 400,
						left: 40,
						top: 20,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "花语含义："
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						left: 40,
						top: 20,
						width: 700,
						color: '#fff',
						fontSize: 28,
						"content": this.datalist.lang_des
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						top: 20,
						left: 40,
						width: 400,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "诞生石：" + this.datalist.stone
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						width: 400,
						left: 40,
						top: 20,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "诞生石含义："
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						left: 40,
						top: 20,
						width: 700,
						color: '#fff',
						fontSize: 28,
						"content": this.datalist.stone_des
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						width: 400,
						left: 40,
						top: 20,
						color: '#fff',
						fontSize: 48,
						fontFamily: "Times, 楷体",
						"content": "诞生石传说："
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						left: 40,
						width: 700,
						top: 20,
						color: '#fff',
						fontSize: 28,
						"content": this.datalist.legend
					},
					{
						type: "container",
						direction: "horizontal",
						top: 5,
						left: 15,
						children: [{
								type: "image",
								src: "../../../static/xcx.png",
								top: 10,
								width: 250,
								height: 250,
								objectFit: "cover",
								objectPosition: ["left", "top"]
							},
							{
								type: "image",
								src: "../../../static/renliwu.png",
								width: 350,
								height: 350,
								left: 160,
								objectFit: "cover",
								objectPosition: ["center", "top"]
							},
						]
					}

				]

			});
		},
		onLoad(option) {
			if(option.d){
				this.color=option.d
			}

		},
		methods: {
			showPickerColorPop() {
				this.showPickerColor = true;
			},
			getPickerColor(color) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				});
				/* 隐藏弹窗 */
				this.showPickerColor = false;
			 /* 判断颜色值是否有效 */
				if (color) {
					this.color = color;
					setTimeout(res=>{
						uni.hideLoading();
						this.update()
					},1500)
				}
			},
			update() {
				let path;
				let navigateMethod;
				// #ifdef H5
				path = this.$route.path;
				navigateMethod = uni.navigateTo;
				// #endif
				// #ifndef H5
				path = (pages => "/" + pages[pages.length - 1].route)(getCurrentPages());
				navigateMethod = uni.redirectTo;
				// #endif
				navigateMethod.call(null, {
					url: path + "?d=" + this.color
				});
			},
			fabushri(){
				uni.navigateTo({
					url:'./newbirthday'
				})
			},
			exportImage() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: "canvas",
					fileType: "jpg",
					success: res => {
						// let dates=+new Date()
						// uniCloud.uploadFile({
						// 	filePath: res.tempFilePath,
						// 	cloudPath: dates+'.jpg',
						// 	success(res1) {
						// 		let arr = []
						// 		arr.push(res1.fileID)
						// 		uni.previewImage({
						// 			current: 0,
						// 			urls: arr, 
						// 			success: (res) => {
						// 		        uni.hideLoading();
						// 				uni.showToast({
						// 					title: '长按保存图片',
						// 					duration: 2000
						// 				});
						// 			}
						// 		})
						// 	},
						// 	fail() {
						// 		this.$u.toast('保存失败哦！');
						// 	},

						// });
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.od {
		object-fit: contain;
		position: absolute;
	}

	#canvas {
		width: 750rpx;
		height: 2600rpx;
	}

	.but {
		width: 45%;
		font-weight: bold;
		margin: 30rpx auto;
		background-color: #ff9900;
		color: #fff;
	}
</style>
